<template>
  <view class="content">
    <uni-easyinput style="flex: unset;"  v-model="value" placeholder="请输入内容"></uni-easyinput>
    <view class="billing-btn-class">
      <button class="mini-btn" style="margin: 0 24rpx 0 0;" type="primary" size="mini">开单</button>
      <button class="mini-btn"  style="margin: 0 24rpx 0 0;"type="primary" size="mini">开单记录</button>
    </view>
    <scroll-view
      class="list-content"
      :show-scrollbar="false"
      :scroll-y="true"
      @scrolltolower="lower"
    > 
      <view>
        <view v-for="index in 10" :key="index" class="product-content">
          <view class="product-info">
            <view class="product-name">产品名称:某某某产品{{ index }}</view>
            <view class="product-code">产品编码:BM123456789</view>
          </view>
          <view class="product-rule">
            <view>规格:规格123</view>
            <view class="bill-btn">去开单</view>
          </view>
        </view>
      </view>
    </scroll-view>
    
    <!-- <image class="logo" src="@/static/logo.png"></image>
    <view class="text-area">
      <text class="title">Hello RuoYi</text>
    </view>
    <button @click="scanCode">点击扫码</button>
    <view>
      扫码结果：{{ result }}
      解码结果：{{ decodedData }}
    </view> -->
  </view>
</template>
<script>
export default {
  data() {
    return {
      value: "",
      result: "",
      decodedData: ""
    };
  },
  methods: {
    upper(e) {
      console.log(e)
    },
    lower(e) {
      console.log(e)
    },
    scroll(e) {
      console.log(e)
    },
    scanCode() {
      uni.scanCode({
        onlyFromCamera: false, // 是否只能从相机扫码（false 允许从相册选择）
        scanType: ["qrCode", "barCode"], // 可扫码类型：二维码、条形码
        success: (res) => {
          console.log("扫码结果:", res);
          this.result = res.result;
          if (res.rawData) {
            try {
              this.decodedData = atob(res.rawData); // 方式1
              // 或 this.decodedData = uni.base64ToArrayBuffer(res.rawData); // 方式2
            } catch (e) {
              console.error("解码失败:", e);
            }
          }
        },
        fail: (err) => {
          console.error("扫码失败:", err);
          uni.showToast({
            title: "扫码失败",
            icon: "none"
          });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
  .content {
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    .billing-btn-class {
      width: 100%;
      display: flex;
      margin: 24rpx 0;
    }

    .list-content {
      flex: 1;
      overflow: auto;
      .product-content {
        padding: 24rpx;
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 24rpx;

        .product-info {
          display: flex;
          margin-bottom: 16rpx;
          .product-name {
            color: #333;
            font-size: 28rpx;
            margin-right: 24rpx;
          }
          .product-name {
            color: #333;
            font-size: 28rpx;
          }
        }
        .product-rule {
          display: flex;
          justify-content: space-between;
          color: #333;
          font-size: 28rpx;
          .bill-btn {
            color: rgba(64,149,229,1);
          }
        }
      }
    }
  }

  ::v-deep .uni-easyinput {
    flex: unset;
  }
</style>
